<template>
  <div v-cloak>
    <Top :title="title" iconShow="1"></Top>
    <div class="improve-information" v-if="!hasImproved">
      <span class="improve-information-title">有助于加快借款速度</span>
      <div class="improve-information-name">
        <span class="improve-information-name-word">真实姓名</span>
        <div class="improve-information-name-value">
          <input placeholder="请输入真实姓名" v-model="message.name" />
        </div>
      </div>
      <div class="improve-information-idcard">
        <span class="improve-information-idcard-word">身份证号码</span>
        <div class="improve-information-idcard-value">
          <input placeholder="请输入身份证号" v-model="message.idCard" />
        </div>
      </div>
      <mt-button type="primary" class="improve-information-btn" @click="loanApply">保存</mt-button>
      <p class="improve-information-safe">
        <i class="iconfont icon-dunpai"></i>&nbsp;平台承诺保护客户信息安全</p>
    </div>
  
    <div class="has-improved" v-else>
      <div class="has-improved-content">
        <div>个人信息</div>
        <span>姓名：{{message.name}}</span>
        <br/>
        <span>身份证号码：{{message.idCard}}</span>
      </div>
      <mt-button type="primary" @click="goLoan">资料已完善，去借钱 ></mt-button>
    </div>
  
  </div>
</template>
<script>
import Top from '../components/Header'
import { Indicator } from 'mint-ui'
import { MessageBox } from 'mint-ui'
export default {
  name: 'login',
  data() {
    return {
      // 已完善资料和资料未完成的判断key
      hasImproved: true,
      // 头部标题
      title: '',
      // 获取到的个人资料信息的值
      message: {
        idCard: '',
        name: ''
      },
      // 调用完善资料接口参数
      postData: {
        idCard: '',
        name: ''
      }
    }
  },
  mounted() {
    //加载进来页面初始化
    this.initInformation();
    document.setTitle('完善个人信息');
  },
  methods: {
    loanApply() {
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      //如果资料没完善，填写完善资料的接口参数
      let postData = {
        name: this.message.name,
        idCard: this.message.idCard,
        borrowerId: borrowerId
      }
      //如果资料没完善，填写资料后，调用完善信息接口
      if(this.message.name==''){
        MessageBox.alert('姓名不能为空~','提示');
        return
      }else if(this.message.idCard==''){
        MessageBox.alert('身份证号码不能为空~','提示');
        return
      }else{
         Indicator.open('加载中...')
        this.$http.post("/loansupermarket-app/personal/saveCustomerBaseInfo.do", postData)
        .then((response) => {
          var resBody = response.body;
          Indicator.close();
          if (resBody.code == '000') {
            // 调用接口后，页面初始化
            this.initInformation();
          }else{
            MessageBox.alert(resBody.msg,'提示')
          }
        })
      }
    },
    goLoan() {
      // 跳转推荐产品页
      this.$router.push({ path: '/main/recommentproduct' });
    },
    initInformation() {
      let that = this;
      let borrowerId = window.sessionStorage.getItem('borrowerId');
      let postData = { borrowerId: borrowerId };
      //调用接口，显示loading
      Indicator.open('加载中...')
      this.$http.post('/loansupermarket-app/personal/getCustomerBaseInfo.do', postData)
        .then((response) => {
          // 接口调用完后关闭loading
          setTimeout(function () {
            Indicator.close();
          }, 500)
          var resBody = response.body;
          // console.log(resBody);
          // 返回000，代表用户已登录
          if (resBody.code == '000') {
            that.message = resBody.result;
            // 如果身份证号和姓名都为空，那么跳转到完善信息页面
            if (resBody.result.idCard == "" && resBody.result.name == "") {
              that.hasImproved = false;
              that.title = "完善个人信息"
            //不为空，资料已填完，那么进入我的资料
            } else {
              that.hasImproved = true;
              that.title = "我的资料"
            }
          } else if (resBody.code == '444') {
            //如果返回444，登录失效或未登录，跳转到登录页
            this.$router.push({ path: '/login',query:{history:1} });
          }
        })
    }
  },
  components: { Top }
}
</script>
<style lang="scss">
@import '../scss/variable/base.scss';
.improve-information {
  width: 100%;
  box-sizing: border-box;
  padding: 0 0.4rem;
  margin-top: 1.2rem;
  &-title {
    line-height: 2.48rem;
    font-size: 0.4rem;
    color: #000000;
  }
  &-name {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    padding: 0 0.4rem;
    width: 100%;
    height: 1.33rem;
    background: #fff;
    border-radius: 0.12rem;
    display: flex;
    &-word {
      flex: 3.5;
      text-align: left;
      line-height: 1.33rem;
      font-size: 0.4rem;
    }
    &-value {
      flex: 8.5;
      line-height: 1.3rem;
      text-align: left;
      input {
        outline: none;
        border: none;
        height: 1rem;
        line-height: 0.6rem;
        margin-top: 0.05rem;
      }
    }
  }
  &-idcard {
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.05);
    margin-top: 0.27rem;
    box-sizing: border-box;
    padding: 0 0.4rem;
    width: 100%;
    height: 1.33rem;
    background: #fff;
    border-radius: 0.12rem;
    display: flex;
    &-word {
      text-align: left;
      flex: 3.5;
      line-height: 1.33rem;
      font-size: 0.4rem;
    }
    &-value {
      flex: 8.5;
      line-height: 1.33rem;
      height: 1.1rem;
      text-align: left;
      input {
        margin-top: 0.05rem;
        outline: none;
        border: none;
        line-height: 0.6rem;
        height: 1rem;
      }
    }
  }
  &-btn {
    width: 100%;
    height: 1.2rem;
    margin-top: 0.94rem;
  }
  &-safe {
    margin-top: 0.48rem;
    font-size: 0.36rem;
    .iconfont {
      vertical-align: -5%;
      color: $primaryColor;
      font-weight: bold;
      font-size: 0.42rem;
    }
  }
}

.has-improved {
  margin-top: 1.6rem;
  width: 100%;
  height: 2.55rem;
  text-align: left;
  box-sizing: border-box;
  padding: 0 0.4rem;
  &-content {
    width: 100%;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 0.4rem;
    border-radius: 0.12rem;
    div {
      border-left: 2px solid $primaryColor;
      height: 0.35rem;
      line-height: 0.35rem;
      font-weight: bold;
      padding-left: 0.2rem;
      margin-top: 0.1rem;
      margin-bottom: 0.2rem;
      font-size: 0.4rem;
    }
    span {
      line-height: 0.7rem;
      color: $lightDark;
      font-size: 0.36rem;
    }
  }
  .mint-button {
    width: 100%;
    height: 1.33rem;
    font-size: 0.42rem;
    margin-top: 0.92rem;
  }
}
</style>

